<template>
  <div class="block-browser">
    <SysBrowser
      v-model="internalValue"
      :columns="blockColumns"
      :search-fields="blockSearchFields"
      :api="realGetBlockByGroup"
      title="选择所"
      placeholder="请选择所"
      row-key="blockid"
      label-field="blockno"
      value-key="blockid"
      :display-label.sync="internalDisplayLabel"
      :multiple="multiple"
      :disabled="disabled"
      @change="handleChange"
    />
  </div>
</template>

<script>
import SysBrowser from './index.vue'
import { blockPageInfo } from '@/api/industry.js'
import CompanySelect  from "@/components/commonSelect/companySelect.vue";
import DeptBrowser  from "./DeptBrowser.vue";

export default {
  name: 'BlockBrowser',
  components: {
    SysBrowser,
    CompanySelect
  },
  props: {
    // v-model绑定的所ID
    value: {
      type: [String, Number],
      default: ''
    },
    // 显示的所名称
    displayLabel: {
      type: String,
      default: ''
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 真实API函数
      realGetBlockByGroup: blockPageInfo,
      
      // 表格列配置
      blockColumns: [
        { prop: 'blockno', label: '所编号', width: 150 },
        { prop: 'dname', label: '管理单位', width: 150 },
        { prop: 'houseAdminName', label: '管理部', width: 150 },
        { prop: 'groupNumber', label: '管片代码', width: 150 },
        { prop: 'buildingarea', label: '建筑面积', width: 120 },
        { prop: 'blockgroup', label: '管片', width: 200 },
        { prop: 'buildyear', label: '建造年份', width: 120 },
        { prop: 'structure', label: '房屋结构', width: 200 },
        { prop: 'cqdw', label: '产权单位', width: 200 },
      ],
      // 搜索字段配置
      blockSearchFields: [
        { prop: 'BlockNo', label: '所编号', type: 'input' },
        { prop: 'DID', label: '管理单位', type: 'browser', component: CompanySelect},
        { prop: 'AID', label: '管理部', type: 'browser', component: DeptBrowser},
      ]
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    internalDisplayLabel: {
      get() {
        return this.displayLabel
      },
      set(val) {
        this.$emit('update:display-label', val)
      }
    }
  },
  methods: {
    // 处理选择变化
    handleChange(data) {
      this.$emit('change', data)
    }
  }
}
</script>

<style scoped>
.block-browser {
  width: 100%;
}
</style>